<template>
  <div id="app" class="container">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  /**
   * http://datav.aliyun.com/tools/atlas/index.html 地图数据json
   * 关于左右布局的传统型
   * 如果是采用flex那么一切都靠内容 来控制高度 宽度
   * 需要给min max来填充背景颜色
   * 比如 左边两百 右边一份 这样可以动态的来控制样式完成自适应
   * 适合官网pc的大体布局
   * 如果采用定位
   * 比如左边给一定的宽度
   *  position: fixed;
      width: 210px;
      height: 100%;
      z-index: 97;
   * 如上所示 右边外边距移动对应的宽度 来通过额外的控制
   比如 控制 窗口的样式 采用栅格布局 像十二栅格 二十栅格之类的
   组件库，与窗口变化的监听来改变 导致额外的操作 如果需要一套样式
   多个适配兼容 那定位保证大体可控 代码可以掌握 尤其是后台管理系统
   */

  beforeCreate() {},
  created() {
    console.log(this.$options.allUser,"this.$options")
  },
  beforeMount() {},
  mounted() {
    console.log(
      this.$refs,
      this.$attrs,
      this.$children,
      this.$createElement,
      this.$delete
    )
    console.log(
      this.$emit,
      this.forceUpdate,
      this.$listeners,
      this.$nextTick,
      this.$scopedSlots,
      this.$slots
    )
    console.log(this.$watch)
    // $(function(){console.log(123)})
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  deactivated() {},
  activated() {},
  errorCaptured() {},
  methods: {},
  data() {
    return {}
  },
  components: {},
  comments: false, // 保留注释 true
  computed: {}
}
</script>
<style lang="scss">
:root {
  --color: red;
}
@import "./common/global.scss";
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
</style>
